<template>
    <div style="height: 100%">
        <el-container class="member-grade-page">
            <div class="content-header">
                <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px 10px">
                    <el-col :span="6" class="header-title">离线消息</el-col>
                    <el-col :span="6">
<!--                        <div style="text-align: right">-->
<!--                            <el-button-group>-->
<!--                                <el-button type="primary" plain size="mini" icon="el-icon-circle-plus-outline"-->
<!--                                           @click="dialogShow=true">新增应用-->
<!--                                </el-button>-->
<!--                            </el-button-group>-->
<!--                        </div>-->
                    </el-col>
                </el-row>
            </div>
            <el-main>
                <el-table  stripe :data="dataList" height="100%" v-loading="loading">
                    <el-table-column prop="client" label="目的地" width="100"/>
                    <el-table-column prop="from" label="来源" width="100"/>
                    <el-table-column prop="qos" label="Qos" width="50"/>
                    <el-table-column prop="topic" label="主题" width="150" />
                    <el-table-column prop="packet" label="内容" />
                    <el-table-column prop="retain" label="Retain" width="80" />
                    <el-table-column prop="remark" label="备注" width="120" />
                    <el-table-column prop="step" label="状态" width="80" />
                    <el-table-column prop="created_at" label="创建时间" width="150">
                        <template slot-scope="props">
                            {{props.row.created_at|secondToDate}}
                        </template>

                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-delete"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px"
                                    @click="remove(scope.row)">删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer class="content-table-pagination">
                <el-pagination
                        background
                        :current-page="pagination.current_page"
                        layout="total,prev, pager, next"
                        @current-change="getData"
                        :page-size="20"
                        :total="pagination.totalCount">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import {delete_app,get_undelivered} from "../api/himq_http";
    import {formatTime} from "../comm/date_utils";

    export default {
        name: "MqttUser",
        data() {
            return {
                dataList: [],
                loading: false,
                dialogShow: false,
                label_width: "80px",
                pagination: {
                    totalCount: 10,
                    current_page: 1
                },
                app: {
                    app_name: '',
                    remark: '',
                },
                rules: {
                    app_name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, max: 26, message: '账号长度在5到26个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, message: '密码长度在5到16个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getData(1)
        },
        filters:{
            secondToDate(s){
                return formatTime(s*1000,"Y-M-D h:m:s")
            },
        },
        methods: {
            getData(page) {
                console.log(page)
                this.loading = true;
                let that = this;
                get_undelivered({page:page,page_size:20}).then(
                    resp => {
                        that.loading = false;
                        that.dataList = resp.data.items;
                        that.pagination.totalCount = resp.data.count;
                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },
            remove(row) {
                let label = '确定要删除该消息?';
                let that = this;
                this.$confirm(label, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    delete_app({app_key: row.app_key}).then(
                        resp => {
                            that.$toast({message: resp.message,type:"success"})
                            that.getData(1)
                        }
                    )
                }).catch(reason => {
                    console.log(reason)
                })
            },
        }
    }
</script>

<style scoped>

</style>